<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        label,
        textarea {
            font-size: .8rem;
            letter-spacing: 1px;
        }

        textarea {
            padding: 10px;
            max-width: 100%;
            line-height: 1.5;
            border-radius: 5px;
            border: 1px solid #ccc;
            box-shadow: 1px 1px 1px #999;
        }

        label {
            display: block;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>

    <label for="story">Tell us your story:</label>
    <br>

    <textarea id="story" name="story" rows="5" cols="33">
It was a dark and stormy night...
    </textarea>

</body>

</html>


<!-- 多行文本框 -->
<!-- https://developer.mozilla.org/zh-CN/docs/Learn/Forms/Basic_native_form_controls#%E5%A4%9A%E8%A1%8C%E6%96%87%E6%9C%AC%E6%A1%86 -->
<!-- 多行文本框专指使用 <textarea>元素，而不是使用<input> 元素。 -->
<!-- textarea和常规的单行文本字段之间的主要区别是，允许用户输入包含硬换行符(即按回车)的文本。 -->
<!-- <textarea> -->
<!-- HTML <textarea> 元素表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本，例如评论或反馈表单中的一段意见时，这很有用。 -->